<template>
    <div class="upload-more">
        <!-- 上传 -->

        <!-- action 上传地址，before-upload 开始上传监听，on-success 上传成功监听 -->
        <!-- :headers 上传head，：data 上传附带的参数 -->

        <!-- 预览删除: on-preview, on-remove , before-remove -->
        <!-- multiple 多文件上传（bool），limit 上传个数限制，on-exceed 超出选择文件提示监听，file-list 选择的文件数据集-->
        <!-- list-type 显示类型（ text/picture/picture-card ） -->

        <el-upload
            :action="uploadURL"
            :before-upload="beforeUpload"
            :on-success="successHandle"
            :on-error="errorHandle"
            :data="data"
            :multiple="isMultiple"
            :limit="upFileNum"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :disabled="!isUpdisable"
            list-type="picture-card"
        >
            <!-- 加号icon -->
            <i class="el-icon-plus"></i>
            

        </el-upload>

        <!-- 弹窗图片显示 -->
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>
<script>

export default {
    //外部属性
    props: {

        isMultiple: {
            // 是否多文件上传
            type: Boolean,
            default: false
        },
        upFileNum: {
            //最大上传个数
            type: Number,
            default: 3,
            required: false
        },

        isClickClearList: {
            // 是否点击清空列表
            type: Boolean,
            default: true
        },
        isUpdisable: { //是否显示上传 按钮 
            type: Boolean,
            default: true
        },
        isShowFileList: {
            // 是否显示文件列表
            type: Boolean,
            default: false
        },

        initfileList: {
            type: Array
        },
    },

    watch: {
        //fileList 值的改变
        initfileList(value) {
            console.log('内容：', value);
            this.fileList = value;
        },

        //清空方法调用 时
        clearList() {
            this.file = '';
            this.fileList = [];
        },

        //文件发生改变时
        file(value) {
            if (value != ',') {
                this.img = value;
            }
        }
    },

    data() {
        return {
            fileList: [],
            file: this.img ? this.img : '',

            //图片显示弹窗
            dialogImageUrl: '',
            dialogVisible: false,

            //接口请求 参数
            data: {
               TOKEN: sessionStorage.getItem('token')
            },
            loading: false,
            uploadURL: window.baseUrl + '/sys/file/upload'
        };
    },
    methods: {
        // 开始上传监听
        beforeUpload(file) {
            this.loading = true;
            const isJPG = file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif' || file.type == 'image/png';

            if (!isJPG) {
                this.$message.error('上传的文件 只能是图片格式为 JPEG/JPG/GIF/PNG 格式!');

                return false;
            }
            return isJPG;
        },

        //上传成功监听
        successHandle(response, file, fileList) {
            console.log(fileList);
            if (response.code == '0000') {
                var url = window.baseUrl + '/sys/file/showpic?id=' + response.result[0];
                this.file = url;
                this.loading = false;
                this.$emit('update', [url, response.result[0], response, file, fileList]);

            }else{

                var showStr=file.name + " 上传失败！"
                this.$message.error(showStr);
            }
        },
        //上传失败监听
        errorHandle(err, file, fileList) {
            console.log(err);

            var showStr= err+ ","+file.name + " 上传失败！"
            this.$message.error(showStr);

            this.$emit('moreUpFileErrorHandle', [err, file, fileList]);
        },

        //删除操作
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.$emit('moreUpFileHandleRemove', [file, fileList]);
        },

        //预览操作
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        //选择文件超出提示
        handleExceed(files, fileList) {
            this.$emit('moreUploadHandleExceed', [files, fileList]);
        }
    }
};
</script>
<style >
</style>